<template>
  <div :class="['content-tile',componentSetOptions.class]">
    <div class="su-title">
      <i class="el-icon-document-copy"></i>
      <span>{{ componentSetOptions.name }}</span>
    </div>

    <div v-if="componentSetOptions.operate.length!=0">
      <template v-for="(item,key) in componentSetOptions.operate">
        <!--id等于20000显示 超级管理员显示，超级管理员登录放回的是['*']-->
        <template v-if="item.show">
          <el-button
              :key="key"
              :type="item.type"
              :icon="item.icon"
              :plain="item.plain"
              :round="item.round"
              @click="HandleUtils.handleParent($parent,item.method,item)"
              v-if="item.id==20000 || $store.state.routerRole.indexOf('*')!=-1 "
          >
            {{ item.name }}
          </el-button>
          <!--判断权限-->
          <el-button
              :type="item.type"
              :key="key"
              @click="HandleUtils.handleParent($parent,item.method,item)"
              v-else-if="$store.state.routerRole.indexOf(item.id)!=-1"
          >
            {{ item.name }}
          </el-button>
        </template>
      </template>

    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['componentSetOptions'],
  data() {
    return {};
  },
  created() {
  },
  mounted() {
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.content-tile {
  @include flex(nowrap, space-between, center);
  background: $title-bg;
  border: 1px solid $title-bg;
  padding: 8px;
  margin-bottom: 12px;
  min-height: 32px;

  .su-title {
    font-weight: bold;
    @include flex();

    i {
      font-size: 16px;
      color: $title-icon;
      font-weight: bold;
      margin-right: 8px;
    }
  }
}
</style>
